<template>
	<view class="container">
		<view class="header">
			<text class="icon">🔌</text>
			<text class="title">控制管理</text>
			<button class="button">线路编排</button>
			<button class="button">批量分合闸</button>
		</view>
		<view class="card" v-for="(item, index) in items" :key="index">
			<view class="status">
				<text>{{ item.name }}</text>
				<text class="status-text">{{ item.status }}</text>
			</view>
			<view class="details">
				<view class="details-text">
					<text>220V</text>
					<text>电压</text>
				</view>
				<view class="details-text">
					<text>10A</text>
					<text>电流</text>
				</view>
				<view class="details-text">
					<text>2.2kW</text>
					<text>功率</text>
				</view>
				<view class="details-text">
					<text>26℃</text>
					<text>温度</text>
				</view>
				<view class="details-text">
					<text>0.99</text>
					<text>功率因数</text>
				</view>
				<view class="details-text">
					<text>0mA</text>
					<text>漏电流</text>
				</view>
				<button class="toggle-button"
					:class="{'toggled': item.toggled}">{{ item.toggled ? '分闸' : '分闸' }}</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						name: '五楼照明总闸',
						status: '已合闸',
						toggled: false
					},
					{
						name: '办公区域1照明',
						status: '已合闸',
						toggled: true
					},
					{
						name: '办公区域2照明',
						status: '已合闸',
						toggled: true
					}
				]
			};
		}
	};
</script>

<style>
	.container {
		padding: 10px;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.icon {
		font-size: 24px;
		margin-right: 10px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.button {
		margin-left: 10px;
		padding: 5px 10px;
		background-color: #f0f0f0;
		border: none;
		border-radius: 5px;
	}

	.card {
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.status {
		display: flex;
		align-items: center;
	}

	.status-text {
		background-color: #ff4d4f;
		color: white;
		padding: 2px 5px;
		border-radius: 3px;
		margin-left: 5px;
		font-size: 10px;
	}

	.details {
		display: flex;
		align-items: center;
	}

	.details-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 1px;
	}

	.toggle-button {
		background-color: #4caf50;
		color: white;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
	}

	.toggle-button.toggled {
		background-color: #f44336;
	}
</style>